<template>
	<div :class="[{'defaultUl':show},'travel-menus','swiper']">
		<ul class="swiper-wrapper">
			<li v-for="item in menus" :key="item.type" class="swiper-slide" :class="{'fun':num===item.type}" @click="num=item.type">
				{{item.typeName}}
			</li>
		</ul>
	</div>
</template>

<script>
	import Swiper,{
		EffectCoverflow,
		EffectCube
	} from 'swiper';
	
	Swiper.use([EffectCoverflow,EffectCube]);
	
	export default{
		name:'TravelMenus',
		data(){
			return{
				menus:[],
				swiperMenus:'',
				show:false,
				num:0,
			}
		},
		//组件创建之后发起数据异步请求
		created(){
			this.getMenus();
		},
		mounted(){
			let timer;
			let flag=true;//判断是否打开滚动监听的函数
			//整个网页发起监听滚动事件操作('事件'，触发事件后调用的函数)
			//限制触发函数的时间，每隔多少毫秒执行一次滚动事件函数
			window.addEventListener('scroll',()=>{
				//设置定时器
				if(flag){
					this.fiexMenus()
				}
				// 关闭开关
				flag=false;
				// 清除定时器
				clearTimeout(timer);
				// 设置定时器,每隔50毫秒,打开一次开关
				timer=setTimeout(()=>{flag=true},50);
			},true)
			// this.MenusSwiper();
		},
		methods:{
			fiexMenus(){
				let sTop=window.pageYOffset||document.documentElement.scrollTop
				sTop>=2350?(this.show=true):(this.show=false);
			},
			getMenus(){
				this.axios.get('https://m.youxiake.com/api/m/index/part?uid=&sitecode=5&city_id=5&refreshCount=82').then((res)=>{
					//获取菜单栏的数据
					res.data.data.flowTabList.forEach((item,i)=>{
						let obj={
							type:item.type,
							typeName:item.typeName
						};
						this.menus.push(obj)
					})
					//调用滑动函数
					this.MenusSwiper();
				}).catch((error)=>{
					console.log(error)
				})
			},
			MenusSwiper(){
				//开始点击之后，动态设置swiper的属性【swiper对象.params.属性名=值】
				this.swiperMenus=new Swiper('.travel-menus',{
					slidesPerView:6.5,
					centeredSlides:true,
					centeredSlidesBounds:true,
					slideToClickedSlide:true,
				})
				// console.log(this.swiperMenus)
			}
		}
	}
</script>

<style scoped>
	.travel-menus{
		width: 100%;
		height: 1.5rem;
		/* margin-top: 0.3rem; */
	}
	.travel-menus ul{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}
	.travel-menus ul li{
		width: 15%;
		font-size: 0.4rem;
		background-color: gainsboro;
		text-align: center;
		height: 1.5rem;
		line-height: 1.5rem;
		/* padding-top: 0.3rem;
		padding-bottom: 0.3rem; */
	}
	.travel-menus ul .fun{
		font-size: 0.45rem;
		font-weight: bold;
		background-image: url(../../../../public/fun/img-33.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.defaultUl{
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
	}
</style>
